<!-- 产品动态控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <div
      v-for="(item, index) in form.product"
      :key="index"
      :style="{
        marginBottom: '20px',
      }"
    >
      <a-form :model="item" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="productionName" label="产品名称：">
              <a-input
                placeholder="请输入产品名称"
                v-model="item.productionName"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="productionType" label="产品型号：">
              <a-input
                placeholder="请输入产品型号"
                v-model="item.productionType"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="productionCode" label="产品编码：">
              <a-input
                placeholder="请输入产品编码"
                v-model="item.productionCode"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="productionSpecifications" label="产品规格：">
              <a-input
                placeholder="请输入产品规格"
                v-model="item.productionSpecifications"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              field="budgetUnitPrice"
              label="预算单价："
              v-if="item.budgetUnitPrice !== undefined"
            >
              <a-input-number
                :min="1"
                placeholder="请输入预算单价"
                v-model="item.budgetUnitPrice.price"
              >
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    allow-search
                    v-model="item.budgetUnitPrice.unit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美元</a-option>
                    <a-option>英镑</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="productionNumber"
              label="产品数量："
              v-if="item.productionNumber !== undefined"
            >
              <a-input-number
                :min="1"
                placeholder="请输入产品数量"
                v-model="item.productionNumber.number"
              >
                <template #append>
                  <a-input
                    :style="{
                      width: '50px',
                    }"
                    placeholder="单位"
                    v-model="item.productionNumber.unit"
                  ></a-input>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              field="budgetTotalPrice"
              label="预算总价："
              v-if="item.budgetTotalPrice !== undefined"
            >
              <a-input-number
                :min="1"
                placeholder="请输入预算总价"
                v-model="item.budgetTotalPrice.price"
              >
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    allow-search
                    v-model="item.budgetUnitPrice.unit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美元</a-option>
                    <a-option>英镑</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="btn">
        <a-button
          type="outline"
          @click="additem(index)"
          :style="{
            marginRight: '20px',
          }"
          >添加产品</a-button
        >
        <a-button type="outline" @click="delitem(index)">删除产品</a-button>
      </div>
    </div>
  </a-space>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import {
    reactive,
    computed,
    watchEffect,
    type WritableComputedRef,
  } from 'vue';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  type data = {
    productionName: string; // 产品名称
    productionType: string; // 产品型号
    productionCode: string; // 产品编码
    productionSpecifications: string; // 产品规格
    productionNumber: {
      number: number; // 产品数量
      unit: string; // 单位
    };
    // 预算单价
    budgetUnitPrice: {
      price: number; // 单价
      unit: string; // 单位
    };

    // 预算总价
    budgetTotalPrice: {
      price: number; // 单价
      unit: string; // 单位
    };
  };

  const emit = defineEmits(['update:values']);

  const form: WritableComputedRef<data[]> = computed({
    get() {
      return props.values;
    },
    set(val) {
      emit('update:values', val);
    },
  });

  const item: data = {
    productionName: '',
    productionType: '',
    productionCode: '',
    productionSpecifications: '',
    productionNumber: {
      number: 0,
      unit: '个',
    },
    budgetUnitPrice: {
      price: 0,
      unit: '',
    },

    budgetTotalPrice: {
      price: 0,
      unit: '',
    },
  };

  // watchEffect(() => {
  //   form.value = [item];
  // });

  const rules = reactive({
    // productionName: [
    //   {
    //     required: true,
    //     message: '请输入产品名称',
    //   },
    // ],
    // productionNumber: [
    //   {
    //     required: true,
    //     message: '请输入产品数量',
    //   },
    // ],
    // date: [
    //   {
    //     required: true,
    //     message: '请填写交货时间',
    //   },
    // ],
    // ways: [
    //   {
    //     required: true,
    //     message: '请选择交货方式',
    //   },
    // ],
  });

  // 添加一条交货要求
  const additem = (index: number) => {
    form.value.product.splice(index + 1, 0, cloneDeep(item));
  };

  // 删除一条交货要求
  const delitem = (index: number) => {
    if (form.value.product.length > 1) form.value.product.splice(index, 1);
  };
</script>

<style scoped lang="less">
  .radio {
    :deep(.arco-form-item-content-wrapper) {
      width: 600px;
    }
  }
  :deep(.arco-form-item-content-flex) {
    margin-left: 10px;
  }

  .btn {
    text-align: center;
  }
</style>
